<template>
    <section class="moneyBox">
        <div class="moneyContent">
            <h3 class="moneyTitle">
                充值数量
            </h3>
            <ul class="moneyNum clearfix">
                <li>
                    <button :class="{moneyActive : moneyActive==50}" @click="Active(50,50)">50交易币</button>
                </li>
                <li>
                    <button :class="{moneyActive : moneyActive==100}" @click="Active(100,98)">100交易币</button>
                </li>
                <li>
                    <button :class="{moneyActive : moneyActive==300}" @click="Active(300,288)">300交易币</button>
                </li>
                <li>
                    <button :class="{moneyActive : moneyActive==500}" @click="Active(500,470)">500交易币</button>
                </li>
                <li class="otherNum">
                    <input type="text" v-model="otherMoney" @focus="otherMoneyFn;place=''" @blur="mustNum=false;place='请输入其他数量'" :placeholder="place">
                    <p style="color: red" v-show="mustNum">{{mustMsg}}</p>
                </li>
            </ul>
            <p class="rechargeMsg">
                充值800以上一律9.2折优惠，企业充值联系电话：400-119-1118
            </p>
            <div class="conNum">
                <label>应付金额</label> <span>{{quota}} 元</span>
            </div>
            <div class="conMode">
                <label>支付方式</label> 
                <div :class="{'activeBtn':orderMode=='weixin'}" @click="orderModeBtn('weixin')">
                    <img src="./img/weixin1.png" alt="">
                    <span>微信支付</span>
                    <i v-if="orderMode=='weixin'"></i>
                </div>
                <div :class="{'activeBtn':orderMode=='zhifubao'}" @click="orderModeBtn('zhifubao')">
                    <img src="./img/zhifubao1.png" alt="">
                    <span>支付宝支付</span>
                    <i v-if="orderMode=='zhifubao'"></i>
                </div>
            </div>
            <div class="submitBtn">
                <button @click="moneySubmitBtn">提交订单</button>
            </div>
            <div class="caption">
                <p>充值说明</p>
                <ul>
                    <li>交易币可以用来下载网站上所有设计资料包括：3D模型、施工图、SU模型、概念方案、高清案例等；</li>
                    <li>交易币永久有效，不能提现或转账；</li>
                </ul>
            </div>
        </div>
        <div class="rechargeMask" v-if="weixinMaskShow">
            <div class="rechargeMaskBox" :style="style">
                <div class="drag" @mousedown="move">
                        <span class="loginClose el-icon-close" @click="rechargeMaskClose()"></span>
                    </div>
                <header class="rechargeMaskTitle">支付金额：￥<span id="rechargeNum">{{quota}}</span></header>
                <p class="rechargeMaskScanning">微信扫码支付</p>
                <div>
                    <div class="rechargeErweima">
                        <div id="qrcode">正在生成二维码，请稍后...</div>
                        <span class="erweimaInvalid" :class="{'erweimaMask':invalid}">
                            {{erweimaText}}
                            <button v-if="invalid" @click="refreshBtn">刷新</button>
                        </span>
                    </div>
                    <p class="erweimaCountdown" v-if="!invalid">二维码在{{erweimaNmu}}秒后失效</p>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
import QRCode from 'qrcodejs2'
export default {
    props:["userInfo"],
    data(){
        return{
            otherMoney:"",
            place: "输入其他数量",
            orderMode : 'weixin',//支付方式
            quota:0,//应付金额
            coins : 0,//交易币数量
            moneyActive : "",//选择套餐的高亮
            mustNum:false,//是否显示必须为数字
            mustMsg : "充值数量必须为数字",//必须为数字的内容
            weixinMaskShow : false,//微信支付弹窗
            invalid : false,//二维码失效
            vip: 12,//会员开通月份
            erweimaText:"",
            timer : null,
            erweimaNmu : 60,//二维码倒计时
            style:{//弹窗的位置
                top: "300px",
                left: "600px"
            },
        }
    },
    watch:{
        otherMoney(newValue){
            if(!newValue){
                this.coins = newValue;
                newValue = 0;
                this.coins = newValue;
                this.mustMsg = "充值数量必须为10的倍数";
                return;
            } 
            var re = /^[1-9]+[0-9]*]*$/; //判断字符串是否为数字 
            if (!re.test(newValue)) {
                this.mustNum = true;
                this.mustMsg = "充值数量必须为数字"
                newValue = 0;
                this.quota = newValue;
                this.coins = newValue;
            }else if(newValue%10!=0){
                this.mustNum = true;
                this.mustMsg = "充值数量必须为10的倍数"
                newValue = 0;
                this.quota = newValue;
                this.coins = newValue;
            }else if(newValue>=10&&newValue<=90){
                this.mustNum = false;
                this.quota = newValue;
                this.coins = newValue;
            }else if(newValue>=100&&newValue<=290){
                this.mustNum = false;
                this.coins = newValue;
                newValue=this.accMul(newValue,0.98).toFixed(1)
                 this.quota = newValue;
            }else if(newValue>=300&&newValue<=490){
                this.mustNum = false;
                this.coins = newValue;
                newValue=this.accMul(newValue,0.96).toFixed(1)
                this.quota = newValue;
            }else if(newValue>=500&&newValue<=790){
                this.mustNum = false;
                this.coins = newValue;
                newValue=this.accMul(newValue,0.94).toFixed(1)
                this.quota = newValue;
            }else if(newValue>=800){
                this.mustNum = false;
                this.coins = newValue;
                newValue=this.accMul(newValue,0.92).toFixed(1)
                this.quota = newValue;
            }
            
        }
    },
    methods:{
        ...mapMutations(//mutations中的方法
            ["loginShow","loginClose","loginLoginName","registerLoginName"]
        ),
        orderModeBtn(msg){
            this.orderMode = msg;
        },
        moneySubmitBtn(){
            if(!this.userInfo.userInfo){
                this.loginShow();
            }else{
                if(!this.quota){
                    this.errorWarning('请选择或输入交易币数量')
                }else{
                    if(this.orderMode=="weixin"){
                        this.weixinPay()
                    }else if(this.orderMode=="zhifubao"){
                        this.zhifubaoPay();
                    }
                }
            }
        },
        zhifubaoPay(){//支付宝支付
            var formData = {
                    "paytype" : "0",//支付类型(0支付宝1微信)
                    "type":0,//0 交易币/  1VIP
                    "coins" : this.coins
                }
                axios.post("/pay",formData).then(response=>{
                    $("body").html(response.data)
                }).catch(error=>{
                    console.log(error.response)
                })
        },
        weixinPay(){//微信支付
            var This = this;
                this.erweimaPosition();
                this.weixinMaskShow = true; 
                this.maskShow = false;
                var formData = {
                    "paytype" : "1",//支付类型(0支付宝1微信)
                    "type":0,//0 交易币/  1VIP
                    "coins" : this.coins
                }
                axios.post("/pay",formData).then(response=>{
                    this.qrcode(183,183,response.data.code_url)
                    This.timer = setInterval(function(){//微信支付生成二维码
                        This.erweimaNmu--;
                        if(This.erweimaNmu==0){
                            clearInterval(This.timer);
                            This.erweimaNmu=60;
                            This.invalid = true;
                            This.erweimaText = "二维码已失效，请刷新重试"
                        }
                    },1000)
                    this.paymentResults(response.data.out_trade_no)
                }).catch(error=>{
                    console.log(error.response,"失败")
                })
            
        },
        errorWarning(msg) {//错误提示
            this.$message({
                message: msg,
                type: 'error',
                customClass : "sucPoint",
                duration : 1000,
                showClose : true
            });
        },
        Active(money,currency){//选择套餐的高亮
            this.moneyActive = money;
            this.coins = money;
            this.quota = currency;//应付金额
        },
        otherMoneyFn(){
            this.moneyActive = ""
        },
        accMul(arg1,arg2){//js乘法运算
            var m=0,s1=arg1.toString(),s2=arg2.toString();
            try{m+=s1.split(".")[1].length}catch(e){}
            try{m+=s2.split(".")[1].length}catch(e){}
            return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
        },
        move(e){//弹出框拖拽
	      let odiv = e.target.parentNode;    //获取目标元素
	       
	      //算出鼠标相对元素的位置
	      let disX = e.clientX - odiv.offsetLeft;
	      let disY = e.clientY - odiv.offsetTop;
	      document.onmousemove = (e)=>{    //鼠标按下并移动的事件
	        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
	        let left = e.clientX - disX;  
	        let top = e.clientY - disY;
	         
	        //绑定元素位置到positionX和positionY上面
	        this.positionX = top;
	        this.positionY = left;
	         
	        //移动当前元素
	        odiv.style.left = left + 'px';
	        odiv.style.top = top + 'px';
	      };
	      document.onmouseup = (e) => {
	        document.onmousemove = null;
	        document.onmouseup = null;
	      };
        },
        rechargeMaskClose(){//关闭微信支付弹窗
            this.weixinMaskShow = false;
            this.invalid = false;
            this.erweimaNmu = 60;
            this.rechargeBtn= false;//关闭弹窗可以点击
            clearInterval(this.timer);
            $("#qrcode").html("")
            this.erweimaText="";
        },
        refreshBtn(){//刷新二维码
            var This = this;
            this.invalid = false;
            $("#qrcode").html("");
            this.erweimaText="";
            var formData = {
                    "paytype" : "1",//支付类型(0支付宝1微信)
                    "type":0,//0 交易币/  1VIP
                    "coins" : this.coins
                }
            axios.post("/pay",formData).then(response=>{
                    this.weixinMaskShow = true; 
                    this.qrcode(183,183,response.data.code_url)
                    This.timer = setInterval(function(){//微信支付生成二维码
                                This.erweimaNmu--;
                                if(This.erweimaNmu==0){
                                    clearInterval(This.timer);
                                    This.erweimaNmu=60;
                                    This.invalid = true;
                                    This.erweimaText = "二维码已失效，请刷新重试"
                                }
                        },1000)
                        this.paymentResults(response.data.out_trade_no)
                }).catch(error=>{
                    console.log(error.response,"失败")
                })
        },
        erweimaPosition(){//二维码弹窗位置
            this.style.left = ($(window).width()-330)/2+"px";
            this.style.top = ($(window).height()-330)/2+"px";
        },
        qrcode (width,height,url) {//生成二维码
            $("#qrcode").html("");
            let qrcode = new QRCode('qrcode', {
                "width": width,
                "height": height, // 高度
                "text": url, // 二维码内容
                "render": 'table'
            })
        },
        paymentResults(orderNumber){//请求查询微信支付状态
            clearInterval(this.timer2);
            var over = 60;
            var This = this;
            this.timer2 = setInterval(function(){
                over-=6;
                axios.get("/pay/wxpayreturn/"+orderNumber).then(response=>{
                    //支付成功要做的事
                    if(response.data.status=="1"){
                        clearInterval(This.timer2);
                        This.$router.push("/userCore")
                    }
                })
                if(over<=0){
                    clearInterval(This.timer2);
                }
            },6000)
        },

    }
}
</script>

<style>
.moneyContent{
    padding-left: 78px;
    width: 733px;
}
.moneyBox{
    border-bottom: 1px solid #ddd;
}
.moneyBox .moneyTitle{
    font-size: 18px;
    line-height: 80px;
    color: #333333;
    font-weight: bold;
}
.moneyNum{
    margin-right: -110px;
}
.moneyNum li{
    float: left;
    margin-right: 42px;
    margin-bottom: 25px;
}
.moneyNum button{
    width: 140px;
    height: 44px;
    border: 1px solid #dedede;
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    outline: none;
    padding: 0;
    background: transparent;
    color: #999999;
}
.moneyNum .otherNum input{
    width: 240px;
    height: 44px;
    text-align: center;
    border: 1px solid #dedede;
    color: #999999;
    font-size: 16px;
    line-height: 44px;
    outline: none;
}
.moneyNum .moneyActive{
    border-color: #ff9892;
    box-shadow: 0 0 20px rgba(255, 152, 146, 0.4);
}
.moneyBox .rechargeMsg{
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 68px;
    color: #707070;
}
.conNum{
    margin-bottom: 23px;
}
.conNum label,.conMode label{
    font-size: 18px;
    line-height: 38px;
    color: #333;
    width: 128px!important;
    float: none;
}
.conNum span{
    font-size: 22px;
    line-height: 40px;
    color: #f45d54;
}
.conMode{
    margin-right: -33px;
    margin-bottom: 46px;
}
.conMode div{
    display:inline-block;
    position: relative;
    width: 234px;
    height: 58px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    margin-right: 33px;
    cursor: pointer;
}
.conMode .activeBtn{
    border-color: #ff5d55;
}
.conMode div img{
    margin-top: -5px;
    margin-left: 50px;
    margin-right: 15px;
}
.conMode div span{
    display: inline-block;
    margin-left: -6px;
    font-size: 16px;
    line-height: 58px;
    color: #333;
}
.conMode div i{
    position:absolute;
    right: 0;
    bottom: 0;
    width: 45px;
    height: 29px;
    background: url(./img/modeIcon.png) no-repeat center;
}
.conMode .activeMode{
    border-color: #ff5d55;
}
.submitBtn button{
    width: 352px;
    line-height: 44px;
    font-size: 16px;
    color: #fff;
    background: #ea514b;
    padding: 0;
    outline: none;
    border: none;
    text-align: center;
    border-radius: 4px;
    margin-left: 124px;
}
.caption{
    margin-top: 50px;
    margin-bottom: 20px;
}
.caption p{
    font-size: 18px;
    line-height: 40px;
    color: #333;
}
.caption li{
    padding-left: 21px;
    font-size: 14px;
    line-height: 30px;
    color: #707070;
    background: url(./img/dian.png) no-repeat center left;
}
</style>